<template>
  <div class="wrap">
    <head-title :title="headText" @callback="onClickLeft"></head-title>
    <div class="order wrapbd">
      <div class="orderdetail margin20">
        <div class="adddelation" style="margin-bottom: .1rem;">
          <h3 class="status-box" style="text-align: right;color: #f9960c">需支付：￥{{orderDetail.total_money}}</h3>
        </div>
        <!--<div class="adddelation" style="padding-top: .1rem;">-->
          <!--<span>微信扫码</span>-->
        <!--</div>-->
        <!--<div class="adddelation">-->
          <!--<span class="c-title">支付包</span>-->
          <!--<span><h2 class="left"></h2></span>-->
          <!--<div>-->
            <!--<p></p>-->
          <!--</div>-->
        <!--</div>-->
        <div class="p-btn" style="">
          <van-button type="primary" size="large" @click="onBridgeReady()">快捷支付</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import HeadTitle from "./../../components/title.vue"
  import { Icon,Button,Dialog } from 'vant';
  export default {
    data(){
      return {
        headText: '收银台',  //顶部标题
        orderDetail: '',
        payConfig:{},//支付参数
        orderNo: this.$route.query.order_no,
      }
    },
    created(){
      if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      }else{
        onBridgeReady();
      }
    },
    mounted(){
      var _this = this;
      _this.initialize();  //拉取商品详情信息
    },
    methods:{
      //左上角返回键
      // onClickLeft () { this.$route.query.type == 1 ? this.$router.push('/shoppingcart') : this.$router.push('/mall')},
      onClickLeft () { this.$router.go(-1);},
      //商品详情
      initialize(){
        this.inOrderDetail();
        this.getPayConfig();
      },
      //获取商品详情
      inOrderDetail(){
        var _this = this;
        this.Tools.AXIOS({
          url: 'order/detail',
          transformRequest: {
            order_no: this.orderNo
          },
          success: function (res) {
            _this.orderDetail = res.data.data;
          },error: function(res){
            this.$toast({message: res.data.msg, position: 'bottom',duration: 3000})
          }
        })
      },
      getPayConfig(){
        var _this = this;
        this.Tools.AXIOS({
          url: 'order/cashier',
          transformRequest: {
            order_no: this.orderNo
          },
          success: function (res) {
            _this.payConfig = res.data.data;
          },error: function(res){
            this.$toast({message: res.data.msg, position: 'bottom',duration: 3000})
          }
        })
      },
      //支付
      onBridgeReady() {
        let _this = this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            "appId": _this.payConfig.appId,     //公众号名称，由商户传入
            "timeStamp": _this.payConfig.timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr": _this.payConfig.nonceStr, //随机串
            "package": _this.payConfig.package,
            "signType": "MD5",         //微信签名方式：
            "paySign": _this.payConfig.paySign//微信签名
          },
        function(res){
          // alert(res.err_code+res.err_desc+res.err_msg);
          if(res.err_msg == "get_brand_wcpay_request:ok" ) {
            _this.$router.push({path:'paySuccess',query:{order_no:_this.order_no}});
          }else {
            Dialog.alert({
              message: '操作失败，请重新支付。'
            }).then(() => {
              _this.$router.push({path:'orderDetails',query:{id:_this.order_no}});
            })
          }
        }
      );
      }
    },
    components: {
      HeadTitle,
      [Icon.name]: Icon,
      [Button.name]: Button,
      Dialog
    },
  }
</script>
<style scoped>
  .orderdetail{ width: 100%; margin-bottom: 2rem;}
  .orderdetail .adddelation{ padding: .5rem .3rem; background: #fff; position: relative; border-bottom: 1px solid #F9F9F9;}
  .orderdetail .adddelation span{ overflow: hidden; display: block;}
  .orderdetail .adddelation span h2{ font-size: .35rem; font-weight: normal; color: #323232; margin-bottom: .4rem;}
  .orderdetail .adddelation p{ display: block; width: 85%; color: #666; font-size: .35rem;}
  .orderdetail .adddelation i{ position: absolute; color: #c7c7cc; right: .3rem; top: 1.25rem;}
  .orderdetail .productdetail{ padding: .3rem; overflow: hidden; position: relative; border-bottom: 1px solid #ececec;}
  .orderdetail .productdetail i{ width: 30%;}
  .orderdetail .productdetail i img{ width: 100%; }
  .orderdetail .productdetail span{ width: 65%; font-size: .35rem; margin: 0 2%; color: #666;}
  .orderdetail .productdetail span p{ width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .orderdetail .productdetail span label{ margin-top: .1rem; display: block; color: #B1A99C; font-size: .32rem;}
  .orderdetail .productdetail b{ position: absolute; font-weight: normal; font-size: .5rem; right: .5rem; top: 1.7rem; color: #ea8800;}
  .orderdetail .buynub{ width: 100%; background-color: #fff; padding: .4rem 0; overflow: hidden;}
  .orderdetail .buynub h3{ font-size: .35rem; margin-left: .3rem; font-weight: normal; line-height: .3rem; color: red;}
  .orderdetail .buynub div{ margin-right: .5rem; height: .6rem; border: 1px solid #ac956c; border-radius: 3px;}
  .orderdetail .buynub div span{ text-align: center; height: .6rem; line-height: .6rem;}
  .orderdetail .buynub div span:nth-of-type(1){ border-right: 1px solid #ac956c;}
  .orderdetail .buynub div span:nth-of-type(2){ border-left: 1px solid #ac956c;}
  .orderdetail .buynub div span i{ padding:0 .2rem; color: #ac956c; }
  .orderdetail .buynub div input{ margin: 0 .4rem; background:none; font-size: .36rem; line-height: .6rem;}
  .allOrder{ width: 100%; position: fixed; bottom: 0; left: 0; border-top: 1px solid #E5E5E5; background-color: #fff;}
  .allOrder p{ font-size: .35rem; color: #666; margin: .5rem .3rem 0;}
  .allOrder p label{ font-size: .35rem; color: #ea8800; }
  .sumbOrder{ width: 30%; text-align: center; color: #fff; font-size: .35rem; background-color: #ea8800; padding: .5rem 0;}
  .isradio{ width:75%; display: flex; margin-top: .1rem;}.ptcheck{ margin-left: 6%;}.margin_r{margin-right: 6%;}
  .c-title{ margin-bottom: .2rem;color: #999;}
  .express-tips{ color: #ea8800;margin-top: .1rem;}
  .product-t{    color: #666;font-size: .35rem;padding: 0 .2rem;background-color: #f6f6f6;}
  .product-t i{color: #ea8800;font-style:normal}
  .status-box{ color: #fff;}
  .icon-t{margin-right: .1rem;font-size: .5rem;}

  .p-btn{display: block;padding: .5rem 0.1rem;position: absolute;height: 40px;left: 0;right: 0;}
</style>
